<template>
    <div class="detailsBox">
        <!-- 详情页导航栏 -->
        <div class="detailsBox_top">
            <van-nav-bar title="商品详情页" left-arrow @click-left="onClickLeft" fixed />
        </div>
        <!-- 详情页内容 -->
        <!-- 详情页轮播图部分 -->
        <div class="swiperBox">
            <van-swipe @change="onChange" :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img :src="image" v-lazy="image" />
                </van-swipe-item>
                <template #indicator>
                    <div class="custom-indicator">{{ current + 1 }}/{{ images.length }}</div>
                </template>
            </van-swipe>
        </div>
        <!-- 商品说明 -->
        <div class="tradeDescription">
            <div class="priceBox">
                <div class="left">
                    <span class="price">￥{{ proDetails.goods_price_max }}</span>
                    <span class="oldPrice">￥{{ proDetails.line_price_max }}</span>
                </div>
                <div class="right">
                    <span class="sale">已售{{ proDetails.goods_sales }}件</span>
                </div>
            </div>
            <p class="tradeText">
                {{ proDetails.goods_name }}
            </p>
        </div>
        <!-- 商品服务  -->
        <div class="serviceBox">
            <div class="service">
                <span v-for="(item) in proService" :key="item.service_id">
                    <van-icon name="passed" color="#ee0a24" />{{ item.name }}
                </span>
            </div>
        </div>
        <!-- 商品评价部分 -->
        <div class="commentBox">
            <div class="commentTop">
                <div class="left">商品评价({{ proEvaluate.total }}条)</div>
                <div class="right">查看更多</div>
            </div>
            <div class="content">
                <ul>
                    <li v-for="(item) in proEvaluate.list" :key="item.comment_id">
                        <div class="userInfo">
                            <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="User Avatar" class="avatar" />
                            <span class="username">{{ item.user.nick_name }}</span>
                        </div>
                        <div class="rating">
                            <van-rate :value="item.score" size="10" readonly />
                        </div>
                        <p class="commentText">{{ item.content }}</p>
                        <!-- 评价时间 -->
                        <span class="commentTime">{{ item.create_time }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 商品图片 -->
        <div class="goodsImage">
            <ul>
                <li v-for="(item, index) in images" :key="index"> <img :src="item" alt="Goods Image 1" /></li>
            </ul>
        </div>
        <!-- 底部栏部分 -->
        <div class="footer">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" dot />
                <van-goods-action-icon icon="shop-o" text="店铺" />
                <van-goods-action-button type="warning" text="加入购物车" @click="onClickCart(goodsId)" />
                <van-goods-action-button type="danger" text="立即购买" @click="onClickBuy" />
            </van-goods-action>
        </div>
    </div>
</template>
<script>
import { getProDetails, getProService, getProEvaluate, addCart } from '@/api/ProductDetails.js';
export default {
    name: 'detailsIndex',

    data() {
        return {
            //从路由参数中获取商品ID
            goodsId: this.$route.query.goods_id,
            current: 0,
            // 轮播图数据
            images: [],
            // 商品详情数据
            proDetails: {},
            //保障服务数据
            proService: [],
            //商品评价数据
            proEvaluate: {},
            // 购物车数量
            cartCount: 0
        }
    },
    created() {
        //获取商品详情数据
        this.getProDetailsDate(this.goodsId);
    },
    activated() {
        window.scrollTo(0, 0)
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        onChange(index) {
            this.current = index;
        },
        //获取商品详情数据
        async getProDetailsDate(goods_id) {
            const res = await getProDetails(goods_id);
            this.proDetails = res.data.detail;
            console.log(this.proDetails);
            //遍历this.proDetails.goods_images数组，添加到轮播图数据images中
            this.proDetails.goods_images.forEach(item => {
                this.images.push(item.external_url);
            });
            //商品保障服务
            const serviceRes = await getProService(goods_id);
            this.proService = serviceRes.data.list;
            //商品评价
            const evaluateRes = await getProEvaluate(goods_id);
            //evaluateRes前两条数据赋值给this.proEvaluate
            this.proEvaluate = {
                total: evaluateRes.data.total,
                list: evaluateRes.data.list.slice(0, 2)
            };
        },
        onClickBuy() {
            //处理要传入vuex中的数据
            const product = {
                goods_id: this.proDetails.goods_id,
                goods_name: this.proDetails.goods_name,
                goods_image: this.proDetails.goods_image,
                goods_price: this.proDetails.goods_price_max,
                goods_count: 1
            };
            //将商品信息存入vuex
            this.$store.commit('productPay/setproductdata', product);
            //跳转到支付页面
            this.$router.push('/pay');
        },
        //加入购物车
        async onClickCart(goodsId) {
            const res = await addCart(goodsId, 1);
            this.cartCount = res.data.cartTotal;
            if (res.status === 200) {
                this.$toast.success('加入购物车成功');
            } else {
                this.$toast.fail('加入购物车失败');
            }
        }

    }
};
</script>
<style lang="scss" scoped>
.detailsBox {

    //轮播图部分
    .swiperBox {
        width: 100vw;
        // height: 300px;
        // border: 1px solid #ccc;
        position: relative;
        margin-top: 46px;
        //溢出隐藏
        overflow: hidden;

        .custom-indicator {
            position: absolute;
            right: 5px;
            bottom: 5px;
            padding: 5px 13px;
            font-size: 12px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 15px;
        }

        img {
            width: 100%;
            height: 100%;
            //根据盒子大小调整图片大小
            object-fit: cover;
        }
    }

    //商品说明部分
    .tradeDescription {
        width: 100%;
        // height: 400px;
        // border: 1px solid #111;
        margin-top: 10px;

        .priceBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;

            .left {
                .price {
                    font-size: 20px;
                    color: #e93b3d;
                    // font-weight: bold;
                    margin-right: 10px;
                }

                .oldPrice {
                    font-size: 14px;
                    color: #999;
                    text-decoration: line-through;
                }
            }

            .right {
                .sale {
                    font-size: 14px;
                    color: #666;
                }
            }
        }

        .tradeText {
            padding: 0 10px 10px 10px;
            font-size: 14px;
            color: #333;
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            font-weight: bold;

        }
    }

    //商品服务部分
    .serviceBox {
        // margin-top: 10px;
        background-color: rgba(202, 196, 196, 0.1);
        ;

        .service {
            // display: flex;
            // justify-content: space-between;
            padding: 8px;
            font-size: 12px;
            // color: #666;

            span {
                margin-right: 10px;
            }
        }
    }

    //商品评价部分
    .commentBox {
        // height: 300px;
        margin-top: 10px;
        // border: 1px solid #ccc;
        background-color: #fff;
        padding: 10px;

        //隐藏滚动条
        &::-webkit-scrollbar {
            display: none;
        }


        .commentTop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;

            .left {
                font-size: 16px;
                font-weight: bold;
            }

            .right {
                font-size: 12px;
                color: #999;
            }
        }

        .content {
            ul {
                list-style: none;
                padding: 0;
                margin: 0;

                li {
                    border-bottom: 1px solid #eee;
                    padding: 10px 0;

                    .userInfo {
                        display: flex;
                        align-items: center;
                        margin-bottom: 5px;

                        .avatar {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            margin-right: 10px;
                        }

                        .username {
                            font-size: 14px;
                            color: #333;
                        }
                    }

                    .rating {
                        margin-bottom: 5px;
                    }

                    .commentText {
                        font-size: 14px;
                        color: #555;
                    }

                    .commentTime {
                        display: block;
                        font-size: 12px;
                        color: #999;
                        margin-top: 5px;
                    }
                }
            }
        }
    }

    //商品图片部分
    .goodsImage {
        margin-top: 20px;
        background-color: #fff;
        padding: 10px;

        img {
            width: 100%;
            margin-bottom: 10px;
            border-radius: 8px;
        }
    }
}
</style>